<template>
  <div>
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="main">
      <slot name="main"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
    <h2>
      <slot name="pp" v-bind:user="user">
      </slot>
    </h2>
  </div>
</template>

<script>
export default {
  name: "SlotDemo",
  data() {
    return {
      user: {
        lastName: "lastname",
        firstName: "firstname"
      }
    };
  }
};
</script>
